App.require(function () {
    var app = App.getCurrent();
    app.definePage("strimgviewer", {
        getDomObj: function () {
            this.attachDom(".str-img-index-count", "countContainer")
                .attachDom(".index-content", "indexContent")
                .attachDom(".str-img-container", "container")
                .attachDom(".str-img-viewer", "viewer")
                .attachEvent("container", "imgclick", this.clickContainerHandler, false)
                .attachEvent("container", "click", this.clickMaskHandler, false);
                
            if (this.domList.countContainer) {
                this.attachEvent("countContainer", "iconclick", this.iconClickHandler, false);
            }
        },
        clickMaskHandler: function (ev) {
            this.parent.hidden();
        },
        clickContainerHandler: function (ev) {
            var event = ev.detail.event;
            event.preventDefault();
        },
        iconClickHandler: function (ev) {
            var component = ev.detail.component, id = component.id, countContainer = this.domList.countContainer, event = ev.detail.event;
            event.stopPropagation();
            if (id == "next" && !countContainer.classList.contains("noNext")) {
                this.next();
            }
            if (id == "previous" && !countContainer.classList.contains("noPrevious")) {
                this.previous();
            }
        },
        next: function () {
            this.data.index++;
            this.setCountContainer();
            this.setTransform();
        },
        previous: function () {
            this.data.index--;
            this.setCountContainer();
            this.setTransform();
        },
        setTransform: function () {
            var transformStr = "translateX(" + (1 - this.data.index) * 100 + "vw)";
            this.domList.viewer.style.transform = transformStr;
        },
        init: function () {
            this.data.length = this.data.imgList.length;
            this.setTransform();
            this.setCountContainer();
        },
        setCountContainer: function () {
            var countContainer = this.domList.countContainer;
            if (countContainer) {
                if (this.data.index == 1) countContainer.classList.add("noPrevious");
                else countContainer.classList.remove("noPrevious");
                if (this.data.length == this.data.index) countContainer.classList.add("noNext");
                else countContainer.classList.remove("noNext");
                this.domList.indexContent.textContent = this.data.index;
            }
        },
        render: function (next) {
            this.data.imgList = this.parent.data.imgList;
            this.data.index = this.parent.data.index || 1;
            this.data.content = "title";
            this.fetch("./index.html", function (text) {
                next(this.renderHTML(text));
            })
        }
    })
})